<template>
  <div class="user-center-header">
    <div class="user-info">
      <el-avatar :size="80" :src="userInfo.avatar">
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"/>
      </el-avatar>
      <div class="user-details">
        <h2 class="user-name">{{ userInfo.nickname }}</h2>
        <p class="user-bio">{{ userInfo.bio || '这个人很懒，什么都没有留下' }}</p>
      </div>
    </div>
    
    <div class="user-stats">
      <div class="stat-item">
        <div class="stat-value">{{ userStats.studyDays }}</div>
        <div class="stat-label">学习天数</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ userStats.completedTasks }}</div>
        <div class="stat-label">完成任务</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ userStats.averageScore }}</div>
        <div class="stat-label">平均分数</div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  userInfo: {
    type: Object,
    required: true
  },
  userStats: {
    type: Object,
    required: true
  }
});
</script>

<style scoped>
.user-center-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.user-info {
  display: flex;
  align-items: center;
}

.user-details {
  margin-left: 20px;
}

.user-name {
  font-size: 20px;
  margin: 0 0 8px 0;
}

.user-bio {
  color: #666;
  margin: 0;
  max-width: 400px;
}

.user-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .user-center-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .user-stats {
    margin-top: 20px;
    width: 100%;
    justify-content: space-around;
  }
}
</style>